<template>
  <div class="siteAttr">
    <p-form-model
    ref="ruleForm"
    :model="options"
    :rules="rules"
  >
  <div>
    <p-form-model-item label="工站名称" prop="workstationName">
      <p-input
        disabled
        placeholder="请输入内容"
        v-model="options.workstationName"
      />
    </p-form-model-item>
    <p-form-model-item label="一级工序名称" prop="topProcessName">
      <p-input
        disabled
        placeholder="请输入内容"
        v-model="options.topProcessName"
      />
    </p-form-model-item>
    <p-form-model-item label="条码采集类型" prop="collectionType">
      <p-select v-model="options.collectionType">
        <p-select-option :value="item.value" v-for="(item, index) in collectionTypeList" :key="item.value">
          {{item.title}}
        </p-select-option>
      </p-select>
    </p-form-model-item>
  </div>
    <div>
      <p-form-model-item label="工站编码" prop="workstationCode">
        <p-input
          placeholder="请输入内容"
          disabled
          v-model="options.workstationCode"
        />
      </p-form-model-item>
      <p-form-model-item label="标准工时" prop="workstationHour">
        <p-input-number :min="0"
          placeholder="请输入内容"
          v-model="options.workstationHour"
        />
      </p-form-model-item>
      <p-form-model-item label="返回工站" prop="returnWorkstationCode">
        <p-tree-select
          v-model="options.returnWorkstationCode"
          show-search
          :replaceFields="replaceFields"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="请选择"
          :tree-data="treeData"
          allow-clear
          tree-default-expand-all
        />
      </p-form-model-item>
    </div>
    <div>
      <p-form-model-item label="二级工序名称" prop="twoProcessName">
        <p-input
          disabled
          placeholder="请输入内容"
          v-model="options.twoProcessName"
        />
      </p-form-model-item>
      <p-form-model-item label="是否采集条码" prop="collectionBarcode">
        <p-select v-model="options.collectionBarcode">
          <p-select-option :value="item.value" v-for="(item, index) in collectionBarcodeList" :key="item.value">
            {{item.label}}
          </p-select-option>
        </p-select>
      </p-form-model-item>
      <p-form-model-item label="工站地址编码" prop="workAddressCode">
        <p-select v-model="options.workAddressCode">
          <p-select-option :value="item.value" v-for="(item, index) in workAddressCodeList" :key="item.value">
            {{item.title}}
          </p-select-option>
        </p-select>
      </p-form-model-item>
    </div>
  </p-form-model>
  </div>
</template>

<script>
import mesPeProcess from "@/api/mesPeProcess";
export default {
  name: "handleProcess",
  props: {
    options: {
      type: Object,
      default: function () {
        return { 
          workstationName: '',
          topProcessName: '',
          collectionType: '',
          workstationCode: '',
          workstationHour: '',
          returnWorkstationCode: '',
          twoProcessName: '',
          collectionBarcode: '',
          workAddressCode: '',
        }
      }
    },
  },
  data() {
    return {
      // treeData: [],
      replaceFields: {
        children:'children', 
        title:'showName', 
        value:'processmcode',
        key:'processmcode',
      },
      labelCol: { span: 3 },
      wrapperCol: { span: 8 },
      other: '',
      collectionTypeList: [
        /* {
          value: 'value1',
          label: 'label1',
        },
        {
          value: 'value2',
          label: 'label2',
        }, */
      ],
      /* returnWorkstationCodeList: [
        {
          value: 'value1',
          label: 'label1',
        },
        {
          value: 'value2',
          label: 'label2',
        },
      ], */
      collectionBarcodeList: [
        {
          value: '1',
          label: '是',
        },
        {
          value: '2',
          label: '否',
        },
      ],
      workAddressCodeList: [
     /*    {
          value: 'value1',
          label: 'label1',
        },
        {
          value: 'value2',
          label: 'label2',
        }, */
      ],
      /* form: {
        workstationName: '',
        topProcessName: '',
        collectionType: '',
        workstationCode: '',
        workstationHour: '',
        returnWorkstationCode: '',
        twoProcessName: '',
        collectionBarcode: '',
        workAddressCode: '',
      }, */
      rules: {
        workstationName: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        topProcessName: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        collectionType: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
        workstationCode: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        workstationHour: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        returnWorkstationCode: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
        twoProcessName: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        workAddressCodeList: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
      },
    };
  },
  computed: {
    title(){
      return this.$route.query.handle === 'add'?'新增产品工艺路线':'修改产品工艺路线'
    },
    treeData(){
      const curData = _.cloneDeep(this.$parent.allTreeData);
      curData.forEach( ele =>{
        ele.disabled = true;
        // ele.realKey = `${ele.processmcode}-${ele.processmname}`
        ele.children.forEach( el =>{
          el.disabled = true;
          // el.realKey = `${el.processmcode}-${el.processmname}`
          el.children.forEach( e =>{
            e.realKey = `${e.processmcode}-${e.processmname}`
          });
        });
      });
      return curData;
    },
  },
  created() {
    this.sysDictItem();
  },
  methods: {
    sysDictItem(){
      // 工站地址编码
      mesPeProcess.sysDictItem('address').then( res =>{
          if (res.code === 0){
            this.workAddressCodeList = res.data || [];
          }
      });
      // 条码采集类型
      mesPeProcess.sysDictItem('caijilx').then( res =>{
          if (res.code === 0){
            this.collectionTypeList = res.data || [];
          }
      });
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>
<style scoped lang='less'>
.siteAttr{
  margin-top: 20px;
  .poros-form{
    display: flex;
    >div{
      width: 400px;
      &+div{
        margin-left: 30px;
      }
    }
    .poros-form-item{
      display: flex;
    }
    /deep/ .poros-form-item-label{
      width: 110px;
    }
  }
  .poros-input-number{
    width: 100%;
  }
}
</style>